<template>
  <div class="contain">
    <van-tabs
      offset-top="66px"
      sticky
      color="#1989fa"
      @change="onChange"
      v-model="active"
    >
      <van-tab title="标签 1"></van-tab>
      <van-tab title="标签 2"></van-tab>
    </van-tabs>
    <table> </table>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        class="item-list"
      >
        <div class="item-box" v-for="(item, index) in list" :key="index">
          <div class="item-1 item-flex">
            <div class="item-left">{{item.name}}</div>
            <div class="item-right">{{index+1}}</div>
          </div>
          <div class="item-2 item-flex">
            <div class="item-detail">{{item.name}}</div>
            <div class="item-detail-btn" @click="jump('/detail',index+1)">详情</div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Toast } from 'vant';
import helper from "../../service/helper.js";
import parameter from "../../service/state.js";
export default {
  data() {
    return {
      list: [],
      pushList1: { name: "添加1数据" },
      pushList2: { name: "添加2数据" },
      loading: false,
      finished: false,
      refreshing: false,
      error: false,
      total: 11,
      pageNo: 0,
      pageSize: 10,
      active: 0,
    };
  },
  components: {},
  methods: {
    onLoad() {
      //接口报错设置
      //     fetchSomeThing().catch(() => {
      //     this.error = true;
      //   });
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        if (this.list.length < this.total) {
          for (let i = 0; i < this.pageSize; i++) {
            if (this.active == 0) {
              this.list.push(this.pushList1);
            } else {
              this.list.push(this.pushList2);
            }
          }
          this.loading = false;
        }
        if (this.list.length >= this.total) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onChange(name, title) {
      this.list = [];
      this.onRefresh();
    },
    jump(url, id) {
      if (url && (url == "-1")) {
        this.$router.back(-1);
      } else {
        this.$router.push({ path: url, query: {
          id,
          type:this.active,
        } });
      }
    },
  },
  watch: {},
  mounted() {},
};
</script>
<style scoped lang="less">
.contain {
  overflow-y: scroll;
  background: #ddd;
  margin: 0;
  width: 100%;
  min-height: calc(~"100vh - 56px");
  height: 100%;
  .item-list{
    padding: 10px;
    .item-box{
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 10px;
      background-color:#fff;
        .item-flex{
            display: flex;
            justify-content: space-between;
        }
        .item-1{
          padding-bottom: 5px;
        }
        .item-detail-btn{
          color: rgb(4, 0, 255);
        }
      }
  }
 
}
</style>